<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        window.onload=function () {
            var btn01 = document.getElementById("btn01");//获取按钮对象
            btn01.onclick = function () {//为btn01绑定一个单击响应函数
                alert("hello");
            };
            btn01.onclick = function () {//为btn01绑定一个单击响应函数
                alert("你好");// 这个结果覆盖了hello
            };
            //使用 对象.事件=函数的形式绑定一个响应函数，它只能同时为一个元素一个事件绑定一个响应函数
            //不能绑定多个，如果绑定多个，则后面的会覆盖前面的
            //addEventListener();通过这个方法可以为元素绑定响应函数
            // btn01.addEventListener("click",function () {
            //     alert(1);
            // },false);
            // // //addEventListener适用于浏览器IE8以上的版本
            // btn01.addEventListener("click",function () {
            //     alert(20);
            // },false);
            //attachEvent();适用于浏览器IE8版本
            // btn01.attachEvent("onclick", function () {
            //     alert(30);
            // });//这个方法可以为一个事件绑定多个处理函数，不同的是它是后绑定的先执行，
            // //执行顺序跟addEventListener() 相反
            // btn01.attachEvent("onclick", function () {
            //     alert(40);
            // });
            bind(btn01,"click",function() {
                alert(this);//在chrome 火狐浏览器 中this是指btn01  IE8中this是window 需要统一
                //需要修改 obj.attachEvent("on"+eventStr, callback为
                // obj.attachEvent("on"+eventStr, function(){
                // callback.call(obj);
                // })
            })
        };
        function bind(obj,eventStr,callback) {//bind绑定
            if (obj.addEventListener){
                //大部分浏览器兼容的方式
                obj.addEventListener(eventStr,callback,false);
            } else {
                //IE8兼容的方式
                obj.attachEvent("on"+eventStr, function () {
                    //在匿名函数中调用回调函数
                    callback.call(obj);//用这个 浏览器chrome 火狐IE8中的this都是显示的是btn01
                    });
            }
        }
    </script>
</head>
<body>
<script>
    /* 绑定单击函数的方法有4个
    *     1.使用 对象.事件=函数的形式绑定一个响应函数，它只能同时为一个元素一个事件绑定一个响应函数
    *                                          不能绑定多个，如果绑定多个，则后面的会覆盖前面的
    *     2.addEventListener();// 增加事件监听者 绑定单击函数   【这个方法IE8以下的版本不支持】
    *           参数：
    *               2.1事件的字符串 不要on
    *               2.2回调函数 当事件触发时 该函数调用
    *               2.3是否在捕获阶段触发事件，需要一个布尔值，一般都传false
    *       例如： btn01.addEventListener("click",function () {},false)
    *       使用addEventListener()可以同为一个元素的相同事件同时绑定多个响应函数，这样当事件被触发时，
    *       响应函数将会按照函数的绑定顺序执行
    *     3.attachEvent() 绑定单击响应函数【适用于IE8】
    *           参数：
    *               3.1事件的字符串 要on
    *               3.2回调函数
    *    4.定义一个函数，用来为指定元素绑定响应函数
    *           attachEvent() 中的this 是window
    *           addEventListener()中的this 是绑定的事件对象btn01
    *           参数：
    *               4.1 obj 要绑定事件的对象
    *               4.2 eventStr 事件的字符串 (不要on )
    *               4.3 callback回调函数
    *   5.this是有调用方式决定的，callback.call(obj)  .call方法可以修改this
    * bind(btn01,"click",function(){
    *       alert(this);
    * })
    * */
</script>
<button id="btn01">点我有惊喜</button>
</body>
</html>